<template>
  <a-card title="测试组件和新功能专用">
    <ContentHeader title="图片预览" margin="5px 0" />
    <a-button @click="previewImg">使用setup组合式api时引入方法调用</a-button>
    <ContentHeader title="i18n测试" margin="5px 0" />
    <span> {{ t('component.app.searchNotData') }}</span>
    <ContentHeader title="pinia" margin="5px 0" />
    <span @click="setToken('已经获取token')"> {{ token || '点击我获取token' }}</span>
    <a-button @click="getInfo"> 获取用户信息</a-button>
    <ContentHeader title="测试tsx" margin="5px 0" />
    <BasicTitle help-message="goods"> 你好 </BasicTitle>
    <Test />
    <ContentHeader title="测试tsx" margin="5px 0" />
    <Hello />
    <ContentHeader title="SvgIcon" margin="5px 0" />
    <SvgIcon class="text-red-500" name="page-volume-fill" />
    <ContentHeader title="Icon" margin="5px 0" />
    <Icon icon="mdi-light:home" />
    <ContentHeader title="测试compositionRoute" margin="5px 0" />
    <a-button @click="changeRouter">点我跳转</a-button>
    <ContentHeader title="Table" margin="5px 0" />
    <STable ref="table" size="default" :columns="columns" :showPagination="false" rowKey="no" :data="getTableData" />
    <ContentHeader title="IconPicker+Form表单" margin="5px 0" />
    <a-form :form="form" layout="vertical" @submit="handleSubmit">
      <a-form-item label="svg图标">
        <IconPicker mode="svg" v-decorator="['h5', { initialValue: 'h5' }]" />
      </a-form-item>
      <a-form-item label="iconify图标">
        <IconPicker v-decorator="['icon', { initialValue: 'ant-design:alipay-square-filled' }]" />
      </a-form-item>
      <!-- <a-form-item label="菜单名称">
        <a-input
          placeholder="菜单名称必填"
          v-decorator="['name', { rules: [{ required: true, message: '菜单名称必填' }] }]"
        />
      </a-form-item> -->
      <a-button type="primary" html-type="submit">保存</a-button>
    </a-form>
  </a-card>
</template>

<script setup lang="tsx">
import { SvgIcon, Icon, IconPicker } from '/@/vbenComponents/Icon'
import { ContentHeader, STable } from '@/components'
import { useRouter } from '/@/use/useVueApi'
import { useForm } from '/@/use/useForm'
import Hello from './Hello'
import { columns, tableData } from './demo.data'
import { computed, defineComponent } from 'vue'
import { BasicTitle } from '/@/vbenComponents/Basic'
import { useUserStore } from '/@/store/modules/user'
import { preview } from 'vue3-preview-image'

const { t } = useI18n()

// console.log(t('component.app.searchNotData'))

// pinia
const userStore = useUserStore()

const { setToken, getUserInfoAction } = userStore

const getInfo = async () => {
  const userInfo = await getUserInfoAction()
  console.log(userInfo)
}
// 获取token
const token = computed(() => {
  return userStore.token
})
// 测试store
// 测试路由
const router = useRouter()
// 测试表单
const [form, { validateFields }] = useForm()

const getTableData = () => {
  return Promise.resolve({ data: tableData })
}
function changeRouter() {
  router.push('/')
}
function handleSubmit(e) {
  e.preventDefault()
  // 表单验证
  validateFields((errors, values) => {
    console.log(errors, values)
  })
}
const previewImg = () => {
  const list = [
    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  ]
  preview(0, list)
}
</script>
<script lang="tsx">
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'
import { useI18n } from '@/hooks/web/useI18n'

export default defineComponent({
  components: {
    Test: createAsyncComponent(() => import('./Test.vue')),
  },
})
</script>
